<template>
	<view>
		<view class="userBox">
			<view class="userImg">
				<!-- <image src="{{user.avatar.url||user.avatar}}" /> -->
				<open-data type="userAvatarUrl"></open-data>
			</view>
			<view class="helloUser">你好，<open-data type="userNickName" lang="zh_CN"></open-data>
			</view>

			<text class="tip">为了您的账号安全，请绑定手机号</text>
		</view>
		<button class="submit-btn" open-type="getPhoneNumber" @getphonenumber="getWechatUserPhone" bindgetphonenumber="getWechatUserPhone">
			<image src="../../static/sns/wechat.png" class="wechat-img"></image>微信手机号一键绑定
		</button>
		<button class="phone-login" @click="goToPage">使用其他手机号</button>
	</view>
</template>

<script>
	import {
		$storage
	} from '@/utils'
	export default {
		data() {
			return {
				show: false
			};
		},
		created: function() {
			console.log('onshow')
		},
		methods: {
			goToPage() {
				uni.navigateTo({
					url: '/pages/register/otherPhone/index',
				})
			},
			async getWechatUserPhone(e) {
				const detail = e.detail
				if (detail.errMsg !== 'getPhoneNumber:ok') return
				const code = $storage.get('wechat-login-code')
				try {
					const registerInfo = $storage.get('registerInfo')
				
					const res = await this.$u.api.bindUser({
						encryptedData: detail.encryptedData,
						iv: detail.iv,
						payload: registerInfo.payload,
						decrypt: registerInfo.decrypt,
						code
					})
					if (res.type === 'alert') {
						wx.showModal({
							title: '错误',
							content: res.message,
						})
						return
					}
					$storage.set('accessToken', res.token, {
						expires: res.expires_in,
					})
					$storage.set('passportToken', res.passport_token, {
						expires: res.expires_in,
					})
					$storage.set('rouyu-app-id', res.app_id)
					$storage.set('rouyu-device-id', res.device_id)
					$storage.set('rouyu-user-id', res.uid_id)
					$storage.set('openId', res.openid)
					const user = await this.$u.api.getCurrentUser()
					$storage.set("user", user)
					$storage.remove('registerInfo')
					uni.$emit('after:login')
					uni.$emit('login:close')
					uni.navigateBack({
						delta: 1
					})
				} catch (error) {
					wx.showModal({
						title: '错误',
						content: "手机授权错误",
					})
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	.userBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 358rpx;

		.userImg {
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.helloUser {
			font-size: 36rpx;
			padding: 40rpx 0;
		}

		.tip {
			font-size: 28rpx;
			color: #465564;
		}
	}

	.submit-btn {
		width: 642rpx;
		height: 88rpx;
		margin-top: 60rpx;
		border-radius: 44rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #0046f5;
		font-size: 36rpx;

		.wechat-img {
			width: 44rpx;
			height: 34rpx;
			margin: 0 18rpx;
		}
	}

	.phone-login {
		color: #0046f5;
		font-size: 36rpx;
		margin-top: 40rpx;
		border: none !important;
		background-color: #fff;
	}
	button::after{
		border: none;
	}
</style>
